<template>
	<view class="container">
		<block v-if="isload">
			<!-- <view class="topimg" :style="{background:t('color1')}">
				<image class="img" :src="bgurl" />
			</view> -->
			<view class="topinfo">
				<view class="flex-box">
					<!-- <view class="myscore"><text class="t1" :style="{color:t('color1')}">{{score}}</text><text
							class="t2">我的{{t('积分')}}</text></view> -->
					<!-- <view class="scorelog" @tap="goto" data-url="/pagesExt/my/scorelog"
						:style="{color:t('color1'),background:'rgba('+t('color1rgb')+',0.2)'}">{{t('积分')}}明细<text
							class="iconfont iconjiantou"></text></view> -->
					<view class="orderlog" @tap="goto" :data-url="'/pagesExt/scoreshop/orderlist?type=1'">购买记录<text
							class="iconfont iconjiantou"></text></view>
					<view @tap="goto" :data-url="'/pagesExt/coupon/mycoupon'">优惠券:<text class="text-t">{{ count
							}}</text>
					</view>
				</view>
				<view class="search-container">
					<view class="search-box">
						<image class="img" src="/static/img/search_ico.png" />
						<input :value="keyword" placeholder="商品搜索..." placeholder-style="font-size:24rpx;color:#C2C2C2"
							type="text" confirm-type="search" @confirm="search"></input>
					</view>
				</view>
			</view>
			<!-- <block v-if="clist.length > 0">
				<view class="navbox">
					<block v-for="(item, index) in clist" :key="index">
						<view style="cursor:pointer" @tap="goto"
							:data-url="item.url?item.url:'prolist?bid='+bid+'&cid='+item.id" class="nav_li">
							<image class="img" :src="item.pic" />
							<view class="txt">{{item.name}}</view>
						</view>
					</block>
					<view class="nav_li" @tap="goto" :data-url="'prolist?bid='+bid">
						<image :src="static_url+'/static/img/all.png'" class="img" />
						<view class="txt">全部</view>
					</view>
				</view>
			</block> -->

			<view id="datalist">
				<block v-for="(item, index) in datalist" :key="index">
					<view @tap="goto" :data-url="'/pagesExt/scoreshop/product?id=' + item.id + '&type=1'"
						class="product-item">
						<view class="itemcontent">
							<view class="product-pic">
								<image :src="item.pic" class="img" />
							</view>
							<view class="product-info">
								<view class="p1">{{ item.name }}</view>
								<view class="p2">
									<block v-if="item.sell_price > 0">价值{{ item.sell_price }}元</block>
								</view>
								<view class="p3">
									<view class="t1 flex">
										<view class="x1" :style="{ color: t('color1') }">
											<text style="font-size:13px">
												<block v-if="item.score_price > 0">{{ item.score_price }}{{ t('积分') }}
												</block>
												<block v-if="item.money_price > 0">
													<block v-if="item.score_price > 0">+</block>{{ item.money_price }}元
												</block>
											</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="itembottom">
							<view class="f1">已购买<text :style="{ color: t('color1') }"> {{ item.sales }} </text>件</view>
							<button class="f2" :style="{ background: t('color1') }">立即购买</button>
						</view>
					</view>
				</block>
				<nomore v-if="nomore"></nomore>
				<nodata v-if="nodata"></nodata>
			</view>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();

export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,

			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,
			score: 0,
			pics: [],
			clist: [],
			datalist: [],
			pagenum: 1,
			keyword: '',
			nodata: false,
			nomore: false,
			sclist: "",
			bid: 0,
			bgurl: '',
			count: 0
		};
	},

	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.bid = this.opt.bid || 0;
		this.getdata();
		this.getnum()
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	onReachBottom: function () {
		if (!this.nodata && !this.nomore) {
			this.pagenum = this.pagenum + 1;
			this.getdatalist(true);
		}
	},
	methods: {
		getnum: function () {
			var that = this;
			that.loading = true;
			app.post('Coupon/mycoupon', {
				bid: that.bid,
				pagenum: 1,
				st: 0,
				type: 40
			}, function (res) {
				if (res.status == 1) {
					that.count = res.count
				} else {
					app.error(res.msg)
				}
			});

		},
		getdata: function () {
			var that = this;
			that.loading = true;
			app.post('ApiScoreshop/index', {
				bid: that.bid
			}, function (res) {
				uni.stopPullDownRefresh();
				that.loading = false;
				that.isload = true;
				uni.setNavigationBarTitle({
					title: that.t('积分') + '商城'
				});
				that.clist = res.clist;
				that.pics = res.pics;
				that.score = res.score;
				that.bgurl = res.bgurl
				that.loaded();
			});
			that.getdatalist();
		},
		getdatalist: function (loadmore) {
			if (!loadmore) {
				this.pagenum = 1;
				this.datalist = [];
			}
			var that = this;
			var pagenum = that.pagenum;
			var keyword = that.keyword;
			that.loading = true;
			that.nodata = false;
			that.nomore = false;
			app.post('ApiScoreshop/getprolist', {
				bid: that.bid,
				pagenum: pagenum,
				keyword: keyword,
				type: 40,
				money: 10
			}, function (res) {
				uni.stopPullDownRefresh();
				that.loading = false;
				that.isload = true;
				var data = res.data;
				if (pagenum == 1) {
					that.datalist = data;
					if (data.length == 0) {
						that.nodata = true;
					}
				} else {
					if (data.length == 0) {
						that.nomore = true;
					} else {
						var datalist = that.datalist;
						var newdata = datalist.concat(data);
						that.datalist = newdata;
					}
				}
			});
		},
		search: function (e) {
			var keyword = e.detail.value;
			app.goto('prolist?bid=' + this.bid + '&keyword=' + keyword);
		}
	}
};
</script>
<style>
.topimg {
	width: 100%;
	height: 300rpx;
}

.topimg .img {
	width: 100%;
	height: 100%
}

.topinfo {
	width: 94%;
	margin: 0 3%;
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	/* padding: 60rpx 20rpx 20rpx 20rpx; */
	/* margin-top: -100rpx; */
	position: relative;
	display: flex;
	flex-direction: column
}

.topinfo .myscore {
	margin-left: 40rpx;
	display: flex;
	flex-direction: column
}

.topinfo .myscore .t1 {
	font-size: 48rpx;
	font-weight: bold
}

.topinfo .myscore .t2 {
	color: #999999;
	font-size: 24rpx;
	margin-top: 10rpx
}

.topinfo .scorelog {
	margin-left: 120rpx;
	margin-top: 30rpx;
	height: 56rpx;
	line-height: 56rpx;
	width: 172rpx;
	text-align: center;
	border-radius: 28rpx;
	font-size: 24rpx;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center
}

.topinfo .orderlog {

	background: rgba(255, 160, 10, 0.2);
	height: 56rpx;
	line-height: 56rpx;
	width: 172rpx;
	text-align: center;
	border-radius: 28rpx;
	color: #FFA00A;
	font-size: 24rpx;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center
}

.search-container {
	width: 100%;
	height: 94rpx;
	padding: 16rpx 23rpx 14rpx 23rpx;
	background-color: #fff;
	position: relative;
	overflow: hidden;
	margin-top: 20rpx
}

.search-box {
	display: flex;
	align-items: center;
	height: 60rpx;
	border-radius: 30rpx;
	border: 0;
	background-color: #f7f7f7;
	flex: 1
}

.search-box .img {
	width: 24rpx;
	height: 24rpx;
	margin-right: 10rpx;
	margin-left: 30rpx
}

.search-box .search-text {
	font-size: 24rpx;
	color: #C2C2C2;
	width: 100%;
}


.nav_li {
	width: 25%;
	text-align: center;
	box-sizing: border-box;
	padding: 30rpx 0 10rpx;
	float: left;
	color: #333
}

.nav_li .img {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}



.weui-loadmore_line .weui-loadmore__tips {
	background-color: #f6f6f6
}

.swiper-container {
	width: 100%;
}

.swiper-container image {
	display: block;
	width: 100%;
}

.category {
	width: 100%;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	flex-direction: row;
	white-space: nowrap;
	display: flex;
	background: #fff;
	overflow-x: scroll;
	margin-bottom: 20rpx
}

.category .item {
	width: 150rpx;
	display: inline-block;
	text-align: center;
}

.category .item image {
	width: 80rpx;
	height: 80rpx;
	margin: 0 auto;
	border-radius: 50%;
}

.category .item .t1 {
	display: block;
	color: #666;
}

.product-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	padding: 0 20rpx;
	margin: 0 20rpx;
	margin-top: 20rpx;
	border-radius: 20rpx
}

.product-item .itemcontent {
	display: flex;
	height: 220rpx;
	border-bottom: 1px solid #E6E6E6;
	padding: 20rpx 0
}

.product-item .product-pic {
	width: 180rpx;
	height: 180rpx;
	background: #ffffff;
	overflow: hidden
}

.product-item .product-pic .img {
	width: 100%;
	height: 180rpx;
}

.product-item .product-info {
	padding: 4rpx 10rpx;
	flex: 1
}

.product-item .product-info .p1 {
	color: #323232;
	font-weight: bold;
	font-size: 28rpx;
	line-height: 36rpx;
	margin-bottom: 10rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: 72rpx
}

.product-item .product-info .p2 {
	height: 50rpx;
	display: flex;
	align-items: center;
	color: #666;
	font-size: 24rpx
}

.product-item .product-info .p3 {
	font-size: 32rpx;
	height: 40rpx;
	line-height: 40rpx;
	display: flex;
	align-items: center
}

.product-item .product-info .p3 .t1 {
	flex: auto;
	font-size: 28rpx;
	font-weight: bold
}

.product-item .product-info .p3 .t1 .x2 {
	margin-left: 10rpx;
	font-size: 26rpx;
	color: #888;
}

.product-item .product-info .p3 .t2 {
	padding: 0 16rpx;
	font-size: 22rpx;
	height: 44rpx;
	line-height: 44rpx;
	overflow: hidden;
	color: #fff;
	background: #4fee4f;
	border: 0;
	border-radius: 20rpx;
}

.product-item .product-info .p3 button:after {
	border: 0
}

.product-item .itembottom {
	width: 100%;
	padding: 0 20rpx;
	display: flex;
	height: 100rpx;
	align-items: center
}

.product-item .itembottom .f1 {
	flex: 1;
	color: #666;
	font-size: 24rpx
}

.product-item .itembottom .f2 {
	color: #fff;
	width: 160rpx;
	height: 56rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8rpx
}

.navbox {
	width: 94%;
	margin: 0 3%;
	margin-top: 20rpx;
	background: #fff;
	height: auto;
	overflow: hidden;
	border-radius: 20rpx;
}

.nav_li {
	width: 25%;
	text-align: center;
	box-sizing: border-box;
	padding: 30rpx 0 10rpx;
	float: left;
	color: #333
}

.nav_li image {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.plr20 {
	width: 100%;
	box-sizing: border-box;
	padding: 0 10rpx;
	margin-bottom: 10rpx;
}

.tj_title {
	background: #fff;
	height: 70rpx;
	width: 100%;
	box-sizing: border-box;
	padding: 0 20rpx;
	line-height: 70rpx;
	display: flex;
	align-items: center;
	border-radius: 10rpx;
}

.icon1 {
	width: 40rpx;
	margin-right: 14rpx
}

.weui-search-bar__box {
	position: relative
}

.weui-icon-search {
	position: absolute;
	width: 32rpx;
	top: 12rpx;
	left: 40%
}

.weui-search-bar__input {
	background: #fff;
	padding: 0 10px;
	margin: 10px;
	border-radius: 5px;
	text-align: center;
}

.topsearch {
	width: 100%;
	max-width: 750px;
	padding: 16rpx 20rpx;
	background: #f6f6f6
}

.topsearch .f1 {
	height: 70rpx;
	border-radius: 8rpx;
	border: 1px solid #eeeeee;
	background-color: #fff;
	flex: 1
}

.topsearch .f1 image {
	width: 34rpx;
	height: 34rpx;
	margin-left: 20rpx
}

.topsearch .f1 input {
	height: 100%;
	flex: 1;
	padding: 0 20rpx;
	font-size: 24rpx;
	color: #333;
	border: 0;
	background: #fff
}

.search-btn {
	color: #5a5a5a;
	font-size: 30rpx;
	width: 60rpx;
	text-align: center;
	margin-left: 20rpx
}

.covermy {
	position: absolute;
	z-index: 99999;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 9999;
	top: 260rpx;
	right: 0;
	color: #fff;
	background-color: rgba(17, 17, 17, 0.3);
	width: 140rpx;
	height: 60rpx;
	font-size: 26rpx;
	border-radius: 30rpx 0px 0px 30rpx;
}

.flex-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 20rpx 0 20rpx;
}

.text-t {
	color: #eb544d;
	font-size: 38rpx;
	font-weight: bold;
}
</style>